<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Beehive 后台</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/beehive-admin.css}">
    <link rel="stylesheet" th:href="@{/elementui/css/index.css}">
    <script th:src="@{/js/jquery-3.4.0.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/js/vue.js}"></script>
    <!-- 看板娘 -->
<!--    <link rel="stylesheet" th:href="@{/animegirl/font-awesome.min.css}">-->
<!--    <script th:src="@{/animegirl/autoload.js}"></script>-->

    <script>
        <!-- 窗口加载时 -->
        window.onload = function () {
            selfAdapt();
        };

        <!-- 窗口调整时 -->
        window.onresize = function () {
            selfAdapt();
        };

        <!-- 自适应函数 -->
        function selfAdapt() {
            // 获取顶部元素宽度，以此调整主视图区域宽度，达到自适应效果
            let app = document.getElementById("top");
            $("#main").width(app.offsetWidth - 198);
        }


        // 去数据统计页面
        function toDashboard() {
            window.open("/admin/dashboard", "main");
        }


    </script>

</head>
<body>
<div id="app" class="container-fluid">
    <!-- 顶部 -->
    <div id="top" class="admin-top">
        <ul class="layui-nav beeui-a" style="background-color: #ffffff">
            <li class="layui-nav-item">
                <span id="brand" style="font-size: 18px; color: #1890ff" onclick="toDashboard()">Beehive Dashboard</span>
            </li>
            <li class="layui-nav-item">
                <a th:href="@{/user/self}" style="color: #000000A6">个人中心<span class="layui-badge-dot"></span></a>
            </li>
            <li class="layui-nav-item beeui-nav-item-right">
                <a th:href="@{/user/self}" style="color: #000000A6"><img th:src="${#strings.replace(session.loginUser.src, 'd:/bms/book', '/path')}" class="layui-nav-img">[[${session.loginUser.username}]]</a>
                <dl class="layui-nav-child">
<!--                    <dd><a style="color: #000000A6">修改信息</a></dd>-->
<!--                    <dd><a style="color: #000000A6">安全管理</a></dd>-->
                    <dd><a href="/admin/logout" style="color: #000000A6">退出登录</a></dd>
                </dl>
            </li>
            <!-- elementUI -->
            <li class="layui-nav-item beeui-nav-item-right">
                <el-tooltip class="item" effect="dark" content="点击跳转到首页" placement="left">
                    <a onclick="toIndex()">
                        <i class="layui-icon layui-icon-link" style="color: #000000A6"></i>
                    </a>
                </el-tooltip>
            </li>
        </ul>
    </div>

    <div class="admin-middle">
        <!-- 侧边栏 -->
        <div class="admin-side">
            <iframe class="iframe-side" th:src="@{/admin-left}"></iframe>
        </div>
        <!-- 主内容 -->
        <div id="main" class="admin-main">
            <iframe class="iframe-main" th:src="@{/admin/dashboard}" name="main"></iframe>
        </div>
    </div>
    <!-- 底部 -->
    <div class="admin-bottom">
        <iframe class="iframe-bottom" th:src="@{/admin-bottom}"></iframe>
    </div>
</div>

<!-- script的位置有影响，放在元素后面 -->
<script th:src="@{/elementui/js/index.js}"></script>

<script>

    // 去首页
    function toIndex() {
        window.open("/index.html");
    }

    layui.use("element", function () {
        let element = layui.element;
    });


    // 注释应该无影响（elementUI）
    let vm = new Vue({
        el: "#app",
    });
</script>
</body>
</html>